<section [formGroup]="renameKeysConfigForm" class="tb-form-panel stroked">
  <div class="tb-form-panel-title" translate>tb.rulenode.rename-keys-in</div>
  <div class="fx-centered">
    <div class="fetch-to-data-toggle">
      <tb-toggle-select class="fetch-to-data-toggle" formControlName="renameIn" appearance="fill">
        <tb-toggle-option *ngFor="let data of renameIn" [value]="data.value">
          {{ data.name }}
        </tb-toggle-option>
      </tb-toggle-select>
    </div>
  </div>
  <tb-kv-map-config
    required
    labelText="{{ translation.get(renameKeysConfigForm.get('renameIn').value) | translate }} {{'tb.rulenode.keys-mapping' | translate}}"
    formControlName="renameKeysMapping"
    uniqueKeyValuePairValidator
    requiredText="{{'tb.rulenode.attr-mapping-required' | translate}}"
    keyText="{{'tb.rulenode.current-key-name' | translate}}"
    keyRequiredText="{{'tb.rulenode.key-name-required' | translate}}"
    valText="{{'tb.rulenode.new-key-name' | translate}}"
    valRequiredText="{{'tb.rulenode.new-key-name-required' | translate}}">
  </tb-kv-map-config>
</section>
